<template>
  <div class="get_serial list_panel" v-loading="isLoading">
    <p class="serial_title">生成结果</p>
    <div class="empty_panel" v-if="!serialNumberList.length"><span>暂无生成结果</span></div>
    <div class="serial_list list_container" v-if="serialNumberList.length">
      <p v-for="(item, index) in serialNumberList" :key="index">
        {{item}}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewSerialNumber',
  data() {
    return {
      isLoading: false, // 获取序列号loading
      serialNumberList: [], // 生成序列号列表
      prefix: '', // 前缀
    }
  },
  computed: {
  },
  methods: {
    // 拖拽更新方法
    onUpdateList() {
      this.transferData()
    },
    /**
     * 获取序列号
     * @param postData
     */
    getSerialNumber(postData) {
      this.isLoading = true
      this.prefix = postData.prefix
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnovermaterialserialnumber/turnoverMaterialSerialNumber/getSerialNumber',
        data: postData,
        noCommit: true
      }).then((res) => {
        if (res && res.data) {
          this.serialNumberList = res.data.number || []
          this.transferData()
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 向父组件传输数据
    transferData() {
      this.$emit('newHandle', {prefix: this.prefix, serialNumberList: this.serialNumberList})
    }
  }
}
</script>

<style lang="less">
  .get_serial{
    width: 66%;
    margin-left: 20px;
    .serial_title{
      overflow: hidden;
      line-height: 44px;
      padding-left: 15px;
      width: calc(100% - 20px);
      background-color: #f5f5f5;
      box-sizing: border-box;
      span{
        display: block;
        color:#7e8e9f;
        font-size: 12px;
        padding-right: 14px;
        float: right;
      }
    }
    .serial_list{
      height: calc(100% - 50px);
      overflow-y: auto;
      display: flex;
      flex-flow: row wrap;
      align-content: baseline;
      padding: 0 22px 10px 15px;
      p{
        margin-right: 10px;
        margin-top: 10px;
        background-color: #dcdfe6;
        color: #333333;
        border-radius: 2px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    &.get_serial::after{
      height: 100%;
      top:0;
    }
  }
</style>
